import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { Table, Pagination, Button, Grid, Form, Input, DatePicker, Select, Dialog, Message, Icon } from '@alifd/next';
import BalloonConfirm from '@icedesign/balloon-confirm';
import IceContainer from '@icedesign/container';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import service from '../../../../utils/service';
import { getLocalTime } from '../../../../utils/localTime';
import Filter from '../chooseHead';
import PageHead from '../../../../components/PageHead';
import api from '../../../../utils/api.js';


// MOCK 数据，实际业务按需进行替换
const { Row, Col } = Grid;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    fixedSpan: 5,
  },
  wrapperCol: {
    span: 20,
  },
};
const formItemLayout2 = {
  labelCol: {
    fixedSpan: 5,
  },
  wrapperCol: {
    span: 14,
  },
};
const formItemLayout3 = {
  labelCol: {
    fixedSpan: 10,
  },
  wrapperCol: {
    span: 12,
  },
};
// function getLocalTime(nS) {
//   return new Date(parseInt(nS) * 1000).toLocaleDateString().replace(/\//g, '-');
// }
@withRouter
export default class Body extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: true,
      SupperData: [],
      SingleSupperData: {},
      Dvisible: false, // 详情弹窗
      Evisible: false, // 编辑弹窗
      page: 1, // 当前页数
      search: '', // 搜索条件
      place: '', // 供应商区域
      countPage: 0, // 总页数
      perPage: 10, // 每页数据量
      id: '', // 供应商id
    };
  }
  // 获取供应商列表
  getSupperInfo= () => {
    service({
      method: 'get',
      url: api.SuperList,
      params: {
        page: this.state.page,
        search: this.state.search,
        place: this.state.place,
      },
    })
      .then((res) => {
        if (res.data.code === 200) {
          const data = res.data;
          this.setState(
            {
              SupperData: data.list,
              countPage: data.count_page,
              isLoading: false,
            }
          );
        } else {
        //  Message.error(res.msg);
        }
      });
  }

  // 获取单个供应商的信息
  getSingleData= (id) => {
    service({
      method: 'get',
      url: api.SuperInfo,
      params: {
        id,
      },
    })
      .then((res) => {

        const data = res.data.info;
        data.ope_time = data.ope_time ? getLocalTime(data.ope_time) : '';
        data.pro_time = data.pro_time ? getLocalTime(data.pro_time) : '';
        data.bus_time = data.bus_time ? getLocalTime(data.bus_time) : '';
        data.org_time = data.org_time ? getLocalTime(data.org_time) : '';
        this.setState(
          {
            SingleSupperData: data,
          }
        );
        // console.log(this.state.placeArr);
      });
  }
  // 修改供应商信息
  EditSupperData= () => {
    const id = this.state.id;
    const data = this.state.SingleSupperData;
    service({
      method: 'post',
      url: api.SuperChange,
      params: {
        act: 'edit',
        id,
        m_id: data.m_id,
      },
      data: this.state.SingleSupperData,
    })
      .then((res) => {
 
        if (res.data.code == 200) {
          Message.success('修改成功！');
          this.setState(
            {
              Evisible: false,
            }, () => {
              this.getSupperInfo();
            }
          );
        } else {
          Message.error('修改失败！');
        }
      });
  }
  // 删除供应商
  DelSupperData= () => {
    const id = this.state.id;
    service({
      method: 'get',
      url: api.SuperDelete,
      params: {
        id,
      },
    })
      .then((res) => {
       
        if (res.data.code == 200) {
          Message.success('删除成功！');
          this.getSupperInfo();
        } else {
          Message.error('删除失败！');
        }
      });
  }
  // 组件挂载完毕
  componentDidMount() {
    // 获取供应商数据
    this.getSupperInfo();
  }

  // 换页
  handlePaginationChange = (page) => {
    this.setState(
      {
        page,
        isLoading: true,
      },
      () => {
        this.getSupperInfo();
      }
    );
  };
  // 筛选条件改变
  handleFilterChange = (value) => {
    // console.log(value);
    this.setState({
      ...value,
      isLoading: true,
      page: 1,
    }, () => {
      this.getSupperInfo();
    });
  };
  // 搜索事件
  handleFilterSearch = (value) => {
    this.setState({
      search: value,
      isLoading: true,
      page: 1,
    }, () => {
      this.getSupperInfo();
    });
  };
  handleEdit = (index) => {
    const SupperData = this.state.SupperData;
    const id = SupperData[index].id;
    this.getSingleData(id);
    this.setState({
      Evisible: true,
      id,
    });
  };

  handleDetail = (index) => {
    const SupperData = this.state.SupperData;
    const id = SupperData[index].id;
    this.getSingleData(id);
    this.setState({
      Dvisible: true,
      id,
    });
  };
  handleDelete = (index) => {
    const SupperData = this.state.SupperData;
    const id = SupperData[index].id;
    this.setState(
      {
        id,
      }
    );
  }
  onClose=() => {
    this.setState({
      Dvisible: false,
      Evisible: false,
    });
  }
  // 详情页 编辑按钮事件
  handleEditBtnClick = () => {
    this.setState({
      Dvisible: false,
      Evisible: true,
    });
  }
  // 详情页 导出事件
  handleOutBtnClick = () => {
    this.setState({
      Dvisible: false,
      Evisible: false,
    });
    window.location.href = `${Uri}/admin/Basicapi/supplier_list?excel=1&id=${this.state.SingleSupperData.id}&m_id=${this.state.SingleSupperData.m_id}`;
  }
  // 编辑页 修改提交
  handleSubBtnClick = () => {
    this.setState({
      Dvisible: false,
      Evisible: true,
    });
    this.EditSupperData();
  }
  // 删除确认键
  onConfirm = (e) => {
    this.DelSupperData();
  }
  handleDownload = () => {
    window.location.href = `${Uri}/admin/Basicapi/supplier_list?excel=1&search=${this.state.search}&place=${this.state.place}`;
  }
  handleForm1Change = (value) => {
    const data = Object.assign({}, this.state.SingleSupperData, value);
    if (data.ope_time) {
      data.ope_time = new Date(data.ope_time).toLocaleDateString();
    }
    if (data.pro_time) {
      data.pro_time = new Date(data.pro_time).toLocaleDateString();
    }
    if (data.bus_time) {
      data.bus_time = new Date(data.bus_time).toLocaleDateString();
    }
    if (data.org_time) {
      data.org_time = new Date(data.org_time).toLocaleDateString();
    }
    this.setState({
      SingleSupperData: data,
    }, () => {
    });
  }

  renderOper = (value, index) => {
    return (
      <div>
        <a style={styles.link.detail} onClick={this.handleDetail.bind(this, index)}>
          详情
        </a>
        <span style={styles.separator} />
        <a style={styles.link.edit} onClick={this.handleEdit.bind(this, index)}>
          编辑
        </a>
        <span style={styles.separator} />
        <BalloonConfirm
          onConfirm={this.onConfirm}
          onCancel={this.onCancel}
          title="真的要删除吗?"
        >
          <a style={styles.link.delete} onClick={this.handleDelete.bind(this, index)}>
          删除
          </a>
        </BalloonConfirm>
      </div>
    );
  };

  render() {
    const { isLoading, page, SupperData, countPage, perPage, SingleSupperData } = this.state;
    return (
      <div style={styles.container}>
        <IceContainer>
          <Filter onChange={this.handleFilterChange} onSearch={this.handleFilterSearch} />
        </IceContainer>
        <PageHead title="供应商信息列表" buttonText="导出Excel" onClick={this.handleDownload} />
        <IceContainer style={{ paddingBottom: '0' }}>
          <Table loading={isLoading} dataSource={SupperData} hasBorder={false} >
            <Table.Column title="ID" dataIndex="id" />
            <Table.Column title="供应商名称" dataIndex="name" />
            <Table.Column title="联系人" dataIndex="contacts" />
            <Table.Column title="联系人电话" dataIndex="mobile" />
            <Table.Column title="座机" dataIndex="landline" />
            <Table.Column title="传真" dataIndex="fax" />
            <Table.Column title="地址" dataIndex="address" />
            <Table.Column title="供货品牌" dataIndex="brand" />
            <Table.Column title="备注" dataIndex="remarks" />
            <Table.Column title="应付余额" dataIndex="cope_price" />
            <Table.Column title="退货联系人" dataIndex="return_contacts" />
            <Table.Column title="退货电话" dataIndex="return_mobile" />
            <Table.Column title="退货地址" dataIndex="return_address" />
            <Table.Column title="操作" cell={this.renderOper} />
          </Table>
        </IceContainer>
        {/* 详情页 */}
        <Dialog
          visible={this.state.Dvisible}
          // autoFocus
          onClose={this.onClose}
          footer={<div><Button type="primary" onClick={this.handleEditBtnClick} className="dialogButton EditBtn">编辑</Button><Button type="primary" onClick={this.handleOutBtnClick} className="dialogButton OutBtn">导出</Button></div>}
          footerAlign="center"
          id="DDialog"
          style={{ marginTop: '25px' }}
        >
          <h3 className="titleWrap"><span className="dialogTitle">供应商信息</span></h3>
          <IceContainer className="dialogContent">
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listName">地点:</Col>
              <Col span="6" >{SingleSupperData.place}</Col>

              <Col span="6" className="listName">联系人:</Col>
              <Col span="6">{SingleSupperData.contacts}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listName">座机:</Col>
              <Col span="6" >{SingleSupperData.landline}</Col>

              <Col span="6" className="listName">手机:</Col>
              <Col span="6">{SingleSupperData.mobile}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listName">传真:</Col>
              <Col span="6" >{SingleSupperData.fax}</Col>

              <Col span="6" className="listName">通讯地址:</Col>
              <Col span="6">{SingleSupperData.address}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listName">邮箱:</Col>
              <Col span="6" >{SingleSupperData.email}</Col>
            </Row>
            <div className="dialogSperator" />
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameG">退货联系人:</Col>
              <Col span="6" >{SingleSupperData.return_contacts}</Col>

              <Col span="6" className="listNameG">退货座机:</Col>
              <Col span="6">{SingleSupperData.return_landline}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameG">退货手机:</Col>
              <Col span="6" >{SingleSupperData.return_mobile}</Col>

              <Col span="6" className="listNameG">退货地区:</Col>
              <Col span="6">{SingleSupperData.return_place}</Col>
            </Row>

            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameG">退货地址:</Col>
              <Col span="6" >{SingleSupperData.return_address}</Col>

              <Col span="6" className="listNameG">备注:</Col>
              <Col span="6">{SingleSupperData.remarks}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameG">预留1:</Col>
              <Col span="6" >{SingleSupperData.reserve_one}</Col>

              <Col span="6" className="listNameG">预留2:</Col>
              <Col span="6">{SingleSupperData.reserve_two}</Col>
            </Row>
            <div className="dialogSperator" />
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">企业法人:</Col>
              <Col span="6" >{SingleSupperData.esta_person}</Col>

              <Col span="6" className="listNameQ">经营范围:</Col>
              <Col span="6">{SingleSupperData.bus_scope}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">纳税人识别号:</Col>
              <Col span="6" >{SingleSupperData.pay_number}</Col>

              <Col span="6" className="listNameQ">经营场所:</Col>
              <Col span="6">{SingleSupperData.place_bus}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">经营许可证号:</Col>
              <Col span="6" >{SingleSupperData.ope_number}</Col>

              <Col span="6" className="listNameQ">经营许可证有效期:</Col>
              <Col span="6">{SingleSupperData.ope_time}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">生产许可证号:</Col>
              <Col span="6" >{SingleSupperData.pro_number}</Col>

              <Col span="6" className="listNameQ">生产许可证有效期:</Col>
              <Col span="6">{SingleSupperData.pro_time}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">营业执证号:</Col>
              <Col span="6" >{SingleSupperData.bus_number}</Col>

              <Col span="6" className="listNameQ">营业执照有效期:</Col>
              <Col span="6">{SingleSupperData.bus_time}</Col>
            </Row>

            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">组织机构代码证号:</Col>
              <Col span="6" >{SingleSupperData.org_number}</Col>

              <Col span="6" className="listNameQ">组织机构代码证有效期:</Col>
              <Col span="6">{SingleSupperData.org_time}</Col>
            </Row>
            <Row wrap width="100" style={{ marginBottom: '15px' }}>
              <Col span="6" className="listNameQ">预留1:</Col>
              <Col span="6" >{SingleSupperData.m_reserve_one}</Col>

              <Col span="6" className="listNameQ">预留2:</Col>
              <Col span="6">{SingleSupperData.m_reserve_two}</Col>
            </Row>
          </IceContainer>
        </Dialog>
        <Dialog
          id="EDialog"
          visible={this.state.Evisible}
          style={{ marginTop: '25px' }}
          footerActions={[]}
          onClose={this.onClose}
          footerAlign="center"
          footer={<div><Button type="primary" onClick={this.handleSubBtnClick} className="dialogButton EditBtn SubBtn">确定</Button><Button type="primary" onClick={this.onClose} className="dialogButton OutBtn">取消</Button></div>}
        >
          <div>
            <h3 className="titleWrap"><span className="dialogTitle">供应商信息编辑</span></h3>
            <IceContainer style={{ width: '1400px' }} className="dialogContent">
              <Row wrap>
                <Col span="11">
                  <IceFormBinderWrapper
                    style={styles.form}
                    // inline
                    // size="medium"
                    // {...formItemLayout2}
                    onChange={this.handleForm1Change}
                    value={SingleSupperData}
                  >
                    <Row gutter="20" wrap>
                      <Col span="12">
                        <span style={styles.SelectLabel}>供应商ID:</span>
                        <IceFormBinder required name="id">
                          <Input
                            size="medium"
                            style={styles.Select}
                            className="idStyle"
                            readOnly
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>地区:</span>
                        <IceFormBinder required name="place">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>供应商名称:</span>
                        <IceFormBinder required name="name">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>联系人:</span>
                        <IceFormBinder required name="contacts">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="24">
                        <span style={styles.SelectLabel}>通讯地址:</span>
                        <IceFormBinder required name="address">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>联系人手机:</span>
                        <IceFormBinder required name="mobile">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>座机:</span>
                        <IceFormBinder required name="landline">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>传真:</span>
                        <IceFormBinder required name="fax">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>邮箱:</span>
                        <IceFormBinder required name="eamil">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>退货联系人:</span>
                        <IceFormBinder required name="return_contacts">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>退货手机:</span>
                        <IceFormBinder required name="return_mobile">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>退货地区:</span>
                        <IceFormBinder required name="return_place">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="12">
                        <span style={styles.SelectLabel}>退货座机:</span>
                        <IceFormBinder required name="return_landline">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="24">
                        <span style={styles.SelectLabel}>退货地址:</span>
                        <IceFormBinder required name="return_address">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="24">
                        <span style={styles.SelectLabel}>备注1:</span>
                        <IceFormBinder required name="remarks">
                          <Input.TextArea
                            aria-label="TextArea"
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="24">
                        <span style={styles.SelectLabel}>预留1:</span>
                        <IceFormBinder required name="reserve_one">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                      <Col span="24">
                        <span style={styles.SelectLabel}>预留2:</span>
                        <IceFormBinder required name="reserve_two">
                          <Input
                            size="medium"
                            style={styles.Select}
                          />
                        </IceFormBinder>
                      </Col>
                    </Row>
                    <span className="tips">注：*标注为必填项!</span>
                  </IceFormBinderWrapper>
                </Col>
                <Col span="2">
                  <div className="formSperator" />
                </Col>
                <Col span="11">
                  <h3 className="r-title">医疗器械经营企业资料</h3>
                  <Form onChange={this.handleForm1Change} value={SingleSupperData} style={styles.form} inline size="medium" className="form2" id="form2" {...formItemLayout3} >
                    <FormItem label=" 企业法人" className="formItemAll" {...formItemLayout3}>
                      <Input id="esta_person" name="esta_person" size="large" className="input" />
                    </FormItem>
                    <FormItem label="经营场所" className="formItemAll" {...formItemLayout3}>
                      <Input
                        id="place_bus"
                        name="place_bus"
                        className="input"
                      />
                    </FormItem>
                    <FormItem
                      label="纳税人识别号"
                      className="formItemAll"
                    >
                      <Input
                        id="pay_number"
                        name="pay_number"
                        className="input"
                      />
                    </FormItem>
                    <FormItem
                      label="经营许可证号"
                      className="formItemAll"
                    >
                      <Input
                        id="ope_number"
                        name="ope_number"
                        className="input"
                      />
                    </FormItem>
                    <FormItem
                      label="经营许可证有效期至"
                      className="formItemAll"
                    >
                      <DatePicker hasClear={false} style={{width:'100%'}} size="large" id="ope_time" name="ope_time" className="input" />
                    </FormItem>
                    <FormItem
                      label="生产许可证号"
                      className="formItemAll"
                    >
                      <Input
                        id="pro_number"
                        name="pro_number"
                        className="input"
                      />
                    </FormItem>
                    <FormItem
                      label="生产许可证有效期至"
                      className="formItemAll"
                    >
                      <DatePicker hasClear={false} style={{width:'100%'}} size="large" id="pro_time" name="pro_time" className="input" />
                    </FormItem>
                    <FormItem
                      label="营业执证号"
                      className="formItemAll"
                    >
                      <Input
                        id="bus_number"
                        name="bus_number"
                        className="input"
                      />
                    </FormItem>
                    <FormItem
                      label="营业执证有效期至"
                      className="formItemAll"
                    >
                      <DatePicker hasClear={false} style={{width:'100%'}} size="large" id="bus_time" name="bus_time" className="input" />
                    </FormItem>
                    <FormItem
                      label="组织结构代码证号"
                      className="formItemAll"
                    >
                      <Input
                        id="org_number"
                        name="org_number"
                        className="input"
                      />
                    </FormItem>
                    <FormItem
                      label="组织结构代码证有效期至"
                      className="formItemAll"
                    >
                      <DatePicker hasClear={false} style={{width:'100%'}} size="large" id="org_time" name="org_time" className="input" />
                    </FormItem>
                    <FormItem
                      label="经营范围"
                      className="formItemAll"
                    >
                      <Input.TextArea
                        aria-label="TextArea"
                        id="bus_scope"
                        name="bus_scope"
                      />
                    </FormItem>
                    <FormItem
                      label="预留1"
                      className="formItemAll"
                    >
                      <Input
                        id="m_reserve_one"
                        name="m_reserve_one"
                        className="input"
                      />
                    </FormItem>
                    <FormItem
                      label="预留2"
                      className="formItemAll"
                    >
                      <Input
                        id="m_reserve_two"
                        name="m_reserve_two"
                        className="input"
                      />
                    </FormItem>
                  </Form>
                </Col>
              </Row>
            </IceContainer>
          </div>
        </Dialog>

        <Pagination
          style={styles.pagination}
          current={page}
          onChange={this.handlePaginationChange}
          total={countPage * perPage}
        />
      </div>
    );
  }
}

const styles = {
  listTitle: {
    textAlign: 'left',
    lineHeight: '40px',
    fontSize: '20px',
    color: '#333333',
    width: '140px',
    height: '40px',
  },
  link: {
    margin: '0 5px',
    color: 'rgba(49, 128, 253, 0.65)',
    cursor: 'pointer',
    textDecoration: 'none',
    edit: {
      color: '#8272EC',
      cursor: 'pointer',
    },
    detail: {
      color: '#5584FF',
      cursor: 'pointer',
    },
    delete: {
      color: '#FF3000',
      cursor: 'pointer',
    },
  },
  separator: {
    margin: '0 8px',
    display: 'inline-block',
    height: '12px',
    width: '1px',
    verticalAlign: 'middle',
    background: '#e8e8e8',
  },
  pagination: {
    marginTop: '20px',
    textAlign: 'center',
  },
  upload: {
    float: 'right',
    color: '#fff',
    backgroundImage: 'linear-gradient(90deg, #FFA20D 0%, #FF6E02 100%)',
    boxShadow: '0 -2px 6px 0 rgba(255,110,2,0.30)',
    borderRadius: '20px 20px 0 0',
    width: '124px',
    height: '40px',
    cursor: 'pointer',
    border: 'none',
    icon: {
      cursor: 'pointer',
      fontSize: '16px',
      textAlign: 'left',
      lineHeight: '22px',
    },
  },
  Select: {
    float: 'right',
    width: 'calc(100% - 90px)',
    height: '28px',
    // maxWidth: '300px',
    margin: '10px 0',
    DatePicker: {
      width: 'calc(100% - 100px)',
      minWidth: '130px',
      float: 'left',
      maxWidth: '300px',
      margin: '10px 0',
    },
  },
  SelectLabel: {
    fontSize: '14px',
    lineHeight: '28px',
    float: 'left',
    margin: '10px 10px 10px 0',
    padding: '0',
    color: '#666',
    textAlign: 'right',
    minWidth: '60px',
  },
};
